import React from "react";
import { useNavigate } from "react-router-dom";
import { FaHome } from "react-icons/fa";

/**
 * OrderFailure组件用于显示订单失败的页面
 * 它提供了一个返回首页的按钮，以便用户可以重新尝试下单
 */
const OrderFailure = () => {
  // useNavigate钩子用于获取导航函数，以便在组件内部进行编程式导航
  const navigate = useNavigate();

  /**
   * handleHomeClick函数用于导航回到首页
   * 它使用navigate函数将用户重定向到应用的根路径
   */
  const handleHomeClick = () => {
    navigate('/');
  };

  // 返回一个订单失败的页面布局，包含错误信息和一个返回首页的按钮
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-background text-text dark:bg-background-dark dark:text-text-dark">
      <h1 className="text-3xl text-red-600 dark:text-red-400 font-bold mb-8">There was an issue with your order. Please try again.</h1>
      <button
        onClick={handleHomeClick}
        className="flex items-center px-6 py-3 bg-primary text-white rounded-lg hover:bg-red-700 dark:bg-primary-dark dark:hover:bg-red-800 transition-colors duration-300"
      >
        <FaHome className="mr-2" />
        Back to Home
      </button>
    </div>
  );
};

export default OrderFailure;
